<template>
  <div class="chatListWrap">
    <div
      class="chatItem"
      v-for="(item, index) in $store.state.chatList"
      :key="item.id"
      :class="{ selectChatItem: item.chatCode == $route.query.chatCode }"
      @click="showChatDetail(item)"
      @contextmenu.prevent="delChatInfo(item, index)"
    >
      <div class="headBar">
        <Header :src="item.base + item.headImg"/>
        <span
          class="chatNum"
          v-if="$store.state.chatNum[item.chatCode]>0"
        >{{$store.state.chatNum[item.chatCode]}}</span>
      </div>
      <div class="chatContent">
        <span class="chatName">{{item.userRemarks || item.userName || item.chatCode}}</span>
        <span class="chatCon">{{ item.content }}</span>
      </div>
      <div class="chatMsg">
        <span>{{ item.chatTime }}</span>
        <span>
          <i v-if="item.notHint" class="iconfont iconlingsheng-jingyin"></i>
        </span>
      </div>
    </div>
  </div>
</template>

<script type='text/ecmascript-6'>
import api from "@/api/index.js";
import Header from "../comp/Header.vue";
import util from '@/utils/index.js';
var moment = require("moment");
export default {
  components: {
    Header
  },
  data() {
    return {
      store_chatNum: {}
    };
  },
  mounted() {
    this.chatList();
  },
  methods: {
    chatList() {
      const params = {
        fromChatCode: JSON.parse(localStorage.userInfo).chatCode
      };
      api.chatList(params).then(res => {
        const result = res.data;
        if (result.code == 0) {
          this.$store.commit('store_chatList', result.data);

          result.data.forEach(element => {
            this.$set(this.store_chatNum, element.chatCode, 0);

            if (element.time) {
              element.chatTime = util.utilTime(element.time);
            }
          });

          this.$store.commit('store_chatNum', this.store_chatNum);

          // 按时间排序
          result.data.sort(function (a, b) {
            return (b.time || 0) - (a.time || 0);
          });
          if (this.$route.query.chatCode) {
            this.getChatDetail();
          }
        }
      });
    },
    getChatDetail() {
      if (this.$store.state.chatList.length <= 0) {
        return;
      }
      this.$store.state.chatList.forEach(element => {
        if (element.chatCode == this.$route.query.chatCode) {
          this.showChatDetail(element);
        }
      });
    },
    showChatDetail(item) {
      this.$emit("click", item);
    },
    delChatInfo(item, index) {
      this.$operationBox([{
        label: '删除',
        callback: () => {
          const params = {
            chatCode: item.chatCode,
            userChatCode: JSON.parse(localStorage.userInfo).chatCode
          }
          api.chatDelete(params).then((res) => {
            if (res.data.code == 0) {
              this.$store.commit('store_chatList', index);
              this.$router.push({ name: 'chat' });
            }
          })
        }
      }])
    }
  },
  watch: {
    $route() {
      const store_chatNum = this.$store.state.chatNum;
      const routeChatCode = this.$route.query.chatCode;
      const chatNum = {};
      for (const key in store_chatNum) {
        if (store_chatNum.hasOwnProperty(key)) {
          const element = store_chatNum[key];
          chatNum[key] = element;
        }
      }
      if (routeChatCode) {
        chatNum[routeChatCode] = 0;
      }
      this.$store.commit('store_chatNum', chatNum);
    }
  }
};
</script>

<style lang='scss' scoped>
.chatListWrap {
  background: #ece9e7;
  overflow-y: auto;
  &::-webkit-scrollbar {
    width: 4px;
    height: 4px;
    background-color: #f5f5f5;
  }
  /*定义滑块 内阴影+圆角*/
  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #aaa;
  }
  .chatItem {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    &:hover {
      background: #c7c6c6;
    }
    &.selectChatItem {
      background: #c7c6c6;
    }
    .headBar {
      position: relative;
      .chatNum {
        position: absolute;
        top: -5px;
        right: -5px;
        display: inline-block;
        background: red;
        font-size: 12px;
        width: 16px;
        height: 16px;
        color: #fff;
        border-radius: 360px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .chatContent {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 0 10px;
      height: 100%;
      > span {
        padding: 2px 0;
      }
      .chatName {
        color: #333;
        font-size: 14px;
      }
      .chatCon {
        color: #999;
        font-size: 12px;
      }
    }
    .chatMsg {
      height: 40px;
      font-size: 12px;
      color: #999;
      > span {
        display: block;
        text-align: right;
        padding: 2px 0;
      }
    }
  }
}
</style>